<script>
import { mapGetters, mapState } from 'vuex'
import TreeTools from '@/views/departments/components/treeTools/treeTools.vue'
import DeptForm from '@/views/departments/components/deptForm/deptForm.vue'
import CopyRight from '@/components/CopyRight/CopyRight.vue'

export default {
  name: 'departments',
  data() {
    return {
      // 是否显示添加和编辑部门的对话框
      showDialog: false,
      /* 当前部门的ID */
      deptId: '',
      /* 是否是编辑状态 */
      isEdit: false,
      /*  */
      loading: false
    }
  },
  methods: {
    /* 派发action发送请求获取企业部门列表的回调函数 */
    async fetchDepartmentsListtsList() {
      try {
        this.loading = true
        const message = await this.$store.dispatch('departmentsStore/fetchDepartmentsList')
      } catch (error) {
        this.$message.error(error.message)
      } finally {
        this.loading = false
      }
    },
    /* 派发action发送请求根据部门ID从部门列表中删除一个部门的回调函数 */
    async doDeleteDepartments(id) {
      const confirm = await this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', { type: 'warning' }).catch(error => error)
      if (confirm === 'cancel') return
      try {
        const message = await this.$store.dispatch('departmentsStore/deleteDepartments', id)
        this.$message.success(message)
        this.fetchDepartmentsListtsList()
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 派发action发送请求根据表单收集的数据从部门列表中新增一个部门的回调函数 */
    async doAddDepartments() {
      // 关闭编辑状态
      this.isEdit = false
      // 打开对话框
      this.showDialog = true
    },
    /* 派发action发送请求根据部门ID以及当前部门回显的数据从部门列表中编辑一个部门的回调函数 */
    doEditDepartments(id) {
      // 开启编辑状态
      this.isEdit = true
      this.$nextTick(async() => {
        // 使用ref获取子组件的实例调用子组件的方法派发action查询部门详情
        await this.$refs.deptForm.findDepartments(id)
      })
      // 打开对话框
      this.showDialog = true
    },
    /*
     * tree-tools组件的自定义事件
     * 子组件传递的事件参数是一个对象其中有command, id字段
     * command参数:add(添加部门)、edit(编辑部门)、delete(删除部门)
     * id参数:当前点击的部门ID
     */
    handleCommand({ command, id }) {
      // 记录当前部门的ID
      this.deptId = id
      switch (command) {
        case 'add':
          // 添加部门操作
          this.doAddDepartments()
          break
        case 'edit':
          // 编辑部门操作
          this.doEditDepartments(id)
          break
        default:
          // 删除部门操作
          this.doDeleteDepartments(id)
      }
    },
    /* dept-form组件编辑部门或者添加部门成功的自定义事件 */
    handleDeptFormSuccess() {
      this.showDialog = false
      this.fetchDepartmentsListtsList()
    },
    /* 对话框关闭时的回调函数 */
    handleClose() {
      this.showDialog = false
      this.$refs.deptForm.clearFormData()
    }
  },
  computed: {
    ...mapState('departmentsStore', ['company']),
    ...mapGetters('departmentsStore', ['treeDepartmentsList']),
    title() {
      return this.isEdit ? '编辑部门' : '新增部门'
    }
  },
  mounted() {
    this.fetchDepartmentsListtsList()
  },
  components: {
    CopyRight,
    DeptForm,
    TreeTools
  }
}
</script>

<template>
  <div class="departments">
    <el-card v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgb(255, 255, 255">
      <section class="header">
        <tree-tools :is-root="true" :show-company-name="true" :tree-node="company" @handle-command="handleCommand"></tree-tools>
      </section>
      <section class="main">
        <el-tree :data="treeDepartmentsList" :expand-on-click-node="false" default-expand-all>
          <template #default="{node,data}">
            <tree-tools :tree-node="data" @handle-command="handleCommand"></tree-tools>
          </template>
        </el-tree>
      </section>
    </el-card>
    <copy-right></copy-right>
    <el-dialog :title="title" :visible.sync="showDialog" :close-on-click-modal="false" append-to-body @close="handleClose">
      <dept-form @submit="handleDeptFormSuccess" @cancel="handleClose" ref="deptForm" :id="deptId"></dept-form>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.departments {
  .el-card {
    margin-top: 20px;

    .header {
      margin-bottom: 15px;
    }
  }
}
</style>
